<template>
  <div class='tab1'>
    <section v-if='res.length'>
      <ul class="tab1-list" v-for='(k,i) in res'>
        <li><img :src='src[i]' alt=""></li>
        <li><div style='font-size:15px'>{{k.name}}</div><div>{{k.deptname}}</div><div class="color-999" style="margin-left:20px">{{k.position}}</div><div style="margin-left:20px;font-size:15px">{{k.leaveName}}<span style='color:#38f;margin-left:15px'>共 {{k.leaveDay}} 天</span></div></li>
        <li><div class="color-999">请假时间</div><div><span>{{k.startTime}} &nbsp;&nbsp;{{k.leaveStSection | ampm}}&nbsp;&nbsp;</span> &nbsp;至&nbsp; <span>&nbsp;&nbsp;&nbsp;{{k.endTime}}&nbsp;&nbsp; {{k.leaveEndSection | ampm}}</span></div></li>
        <li><div class="color-999">当前步骤</div><div :class="handleColor(k.auditStatus)">{{k.auditStatus | status}}</div></li>
      </ul>
      <p v-if='!loadAllFlag' class="loadmore" @click.stop='handleLoadMore'>加载更多...</p>
      <p v-else class="loadmore2">已加载全部</p>
    </section>

    <section class="noData" v-if='!res.length'>
      <div>
        <img src="../../../../static/images/nodata.png" alt="">
      </div>
      <p>本部门还没有相关休假</p>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      res: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      loadAllFlag: false,
      src: []
    };
  },
  filters: {
    ampm: function(value) {
      if (value == '1') {
        return '上午';
      } else if (value == '2') {
        return '下午';
      }
    },
    status: function(val) {
      if (val == '1') {
        return '审批中';
      } else {
        return '已备案';
      }
    }
  },
  methods: {
    handleColor(str) {
      switch (str) {
        case '已审批':
          return 'pass';
          break;
        case '已备案':
          return 'pass';
          break;
        case '已同意':
          return 'pass';
          break;
        case '已驳回':
          return 'nook';
          break;
        case '已拒绝':
          return 'nook';
          break;
        default:
          return 'checking';
          break;
      }
    },

    sendAjax() {
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };

      this.Axios.Post(this.URL.tabQueryList.url, params).then(res => {
        this.res = res.data.datas;

        this.pageNum = res.data.page.pageNum;
        this.pageSize = res.data.page.pageSize;
        this.total = res.data.page.total;

        this.res.forEach(ele => {
          this.src.push(
            this.Axios.baseURI +
              '/' +
              this.URL.tabGetEmployeeImg.url +
              '?emplid=' +
              ele.emplid +
              '&token=' +
              localStorage.getItem('token')
          );
        });

        if (this.res && this.res.length >= this.total) {
          this.loadAllFlag = true;
        }
      });
    },
    handleLoadMore() {
      setTimeout(() => {
        this.pageNum++;
        this.sendAjax();
      }, 1);
    }
  },
  mounted() {
    this.sendAjax();
  }
};
</script>

<style lang='less' scoped>
.pass {
  color: #339966;
}

.nook {
  color: #c7254e;
}

.checking {
  color: #38f;
}
.noData {
  margin-top: 130px;
  div{
    text-align: center;
    margin: 0 auto;
    width:  350px *1.3;
    height: 350px;
    
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  p {
    margin-top: 20px;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
  }
}

.loadmore {
  text-align: center;
  cursor: pointer;
  font-size: 16px;
  margin: 20px 0;
}

.loadmore2 {
  color: #999;
  text-align: center;
  font-size: 16px;
  margin: 20px 0;
}
.tab1 {
  padding: 20px 0;
  margin: 0 auto;
  min-height: 100vh;

  .tab1-list:first-of-type {
    margin-top: 90px;
  }
  .tab1-list {
    width: 75%;
    margin: 20px auto 0 auto;
    padding-bottom: 30px;
    padding-top: 15px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.117647),
      0 1px 4px rgba(0, 0, 0, 0.117647);
    background-color: #fff;
    border-radius: 4px;

    li {
      & > div {
        display: inline-block;
      }
    }
    & > li:first-of-type {
      width: 78px;
      height: 78*1.2px;
      float: left;
      margin-right: 20px;
      margin-left: 20px;
      margin-top: 2px;
      img {
        border-radius: 50%;
        width: 100%;
        height: 100%;
      }
    }

    & > li {
      margin-top: 10px;
      margin-left: 20px;

      .reason {
        max-width: 88%;
        white-space: wrap;
        word-wrap: break-word;
      }

      .tab1-list-icon {
        display: block;
        position: relative;
        top: -2px;
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        background-color: #38f;
        font-size: 14px;
        text-align: center;
        color: #fff;
        border-radius: 50%;
        margin-left: 20px;
        margin-right: 10px;
      }
      .tab1-list-icon.xiaojia {
        background-color: #75d155;
      }
    }
  }
}
.color-999 {
  color: #999;
  margin-right: 20px;
}
.color-38f {
  color: #38f;
}
</style>
